<script lang="ts" setup>
import {menus} from "../routes"
import {useRouter} from 'vue-router'
import {UserFilled} from "@element-plus/icons-vue";

const router = useRouter();
</script>

<template>
  <el-scrollbar>
    <div top>
      <div top-left @click="router.push('/index').catch(()=>true)" style="width: 200px">
        <img alt="logo" src="/Logo.svg" style="width: 30px;height: 30px;"/>
        <div nome>福建旅游网</div>
      </div>
      <div top-center>
        <div v-for="(i,index) in menus" :key="index">
          <div item class="menu-class" @click="router.push(i.path).catch(()=>true)">{{ i['meta']['title'] }}</div>
        </div>
      </div>
      <div top-right>
        <div nome style="cursor: pointer;" @click="router.push('/userInfo').catch(()=>true)">
          <el-icon>
            <UserFilled/>
          </el-icon>
          <span style="margin-left: 5px;">个人中心</span>
        </div>
      </div>
    </div>
    <div main>
      <router-view v-slot="{ Component }">
        <transition name="slide">
          <component :is="Component"/>
        </transition>
      </router-view>
    </div>
  </el-scrollbar>
</template>

<style lang="scss" scoped>
$height: 80px;
.menu-class {
  margin: 0 15px;
}

.menu-class:hover {
  transform: scale(1.1);
  transition: tranform 0.3s linear;
}

[top] {
  user-select: none;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: $height;
  font-weight: bold;
  background-color: #002B49;
  color: white;
}

[top-left] {
  display: flex;
  width: 140px;
  align-items: center;
  justify-content: end;
  margin-right: 10px;
  font-size: 22px;
  cursor: pointer;

  [nome] {
    margin-left: 5px;
  }
}

[top-center] {
  flex: 1;
  display: flex;
  justify-content: center;
  font-size: 18px;
  letter-spacing: 1px;

  [item] {
    cursor: pointer;
  }
}

[top-right] {
  display: flex;
  width: 140px;
  align-items: center;
  justify-content: start;
  margin-left: 10px;
  font-size: 18px;

  [nome] {
    display: flex;
    align-items: center;
    margin-left: 10px;
  }

}

[main] {
  height: calc(100% - $height);
  overflow: hidden;
  position: absolute;
  transition: all 0.3s;
  top: $height;
  width: 100%;
}
</style>